<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>Document</title>
</head>
<body>
  <header class="navbar">
    <nav>
      <ul class="nav-center">
        <li><a href="#home">Home</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="home" id="home">
    <div class="home-text">
      <h1>Start your day <br> with coffee</h1>
      <p>Fuel your focus. Enjoy the aroma of a fresh start, awake your senses ans embrace the day, one cup at a time</p>
      <a href="#" class="btn">Shop Now</a>
    </div>
    <div>
      <img src="main_photo.png" alt="" class="home-img">
    </div>
  </section>

  <section class="menu" id="menu">
    <h2>Popular Picks</h2>
    <div class="menu-grid">
      <div class="card">
        <img src="card-coffe-img1.jpeg" alt="">
        <h3>Espresso</h3>
        <p>Bold and concentrated delight.</p>
        <button>Order Now</button>
      </div>
      <div class="card">
        <img src="card-coffe-img2.jpeg" alt="">
        <h3>Cappuccino</h3>
        <p>Frothy and rich classic.</p>
        <button>Order Now</button>
      </div>
      <div class="card">
        <img src="card-coffe-img3.jpeg" alt="">
        <h3>latte</h3>
        <p>Velverty espresso harmony.</p>
        <button>Order Now</button>
      </div>
      <div class="card">
        <img src="card-coffe-img1.jpeg" alt="">
        <h3>Mocha</h3>
        <p>Chocolatey espresso perfection.</p>
        <button>Order Now</button>
      </div>
      <div class="card">
        <img src="card-coffe-img2.jpeg" alt="">
        <h3>Macchiato</h3>
        <p>Espresso with a spot of milk</p>
        <button>Order Now</button>
      </div>
    </div>
  </section>

  <section class="about" id="about">
    <h2>Meet Our Bristas</h2>
    <div class="about-grid">
      <div class="profile-card">
        <img src="profile photo women1.jpg" alt="">
        <h3>Sarah</h3>
        <p>Latte artist & coffee lover</p>
        <div class="stars">⭐⭐⭐⭐⭐</div>
      </div>
      <div class="profile-card">
        <img src="profile photo men2.jpg" alt="">
        <h3>Tom</h3>
        <p>Brewing perfectionist</p>
        <div class="stars">⭐⭐⭐⭐</div>
      </div>
      <div class="profile-card">
        <img src="profile photo women3.jpg" alt="">
        <h3>Anna</h3>
        <p>Coffee mixologist</p>
        <div class="stars">⭐⭐⭐</div>
      </div>
      <div class="profile-card">
        <img src="profile photo men4.jpg" alt="">
        <h3>Leo</h3>
        <p>Cold brew expert</p>
        <div class="stars">⭐⭐⭐⭐⭐</div>
      </div>
    </div>
  </section>

  <section class="contact" id="contact">
    <h2>Contact Us</h2>
    <form>
      <input type="text" placeholder="Your Name" required/>
      <input type="email" placeholder="Your Email" required/>
      <textarea placeholder="Your Message" required></textarea>
      <button type="submit">Send</button>
    </form>
  </section>

  <footer>
    <p>&copy; 2025 Coffee Bliss. Made with ☕ and ❤️.</p>
  </footer>
</body>
</html>